<template>
	<view>
		<swiper class="swiper" circular :indicator-dots="indicatorDots" :indicator-active-color="indicatorActiveColor" :indicator-color="indicatorColor"	 :autoplay="autoplay" :interval="interval"
			:duration="duration">
			<swiper-item>
				<image src="../../../static/imgs/home/banner1.png" class="swiper-item"></image>
			</swiper-item>
			<swiper-item>
				<image src="../../../static/imgs/home/banner2.png" class="swiper-item"></image>
			</swiper-item>
			<swiper-item>
				<image src="../../../static/imgs/home/banner3.png" class="swiper-item"></image>
			</swiper-item>
		</swiper>
		<view class="px-4 def-bg p-2 mt-2">
			<view class="title">所有平台</view>
		</view>
		<view class="mt-2 px-4">
			<view class="def-bg flex flex-col rounded-lg">
				<view class="flex top-box">
					<view class="p-2">
						<image src="../../../static/logo.png" class="icon-img-50"></image>
					</view>
					<view class="py-4">
						<view>平台一</view>
						<view>非常不错的一个平台,推荐大家入手！！</view>
					</view>
					<view class="py-4">
						<u-button type="error" text="下载软件" shape="circle" size="small"></u-button>
					</view>
				</view>
				<view class="flex justify-between justify-items-center items-center">
					<view class="flex justify-center justify-items-center items-center w-full p-3">
						<view class="iconfont iconfont-process icon-img"></view>入职流程
					</view>
					<view class="split-line-box"></view>
					<view class="flex justify-center justify-items-center items-center w-full p-3">
						<view class="iconfont iconfont-induction icon-img"></view>办理入职
					</view>
				</view>
			</view>
		</view>
		<view class="mt-2 px-4">
			<view class="def-bg flex flex-col rounded-md">
				<view class="flex top-box">
					<view class="p-2">
						<image src="../../../static/logo.png" class="icon-img-50"></image>
					</view>
					<view class="py-4">
						<view>平台二</view>
						<view>非常不错的一个平台,推荐大家入手！！</view>
					</view>
					<view class="py-4">
						<u-button type="error" text="下载软件" shape="circle" size="small"></u-button>
					</view>
				</view>
				<view class="flex justify-between justify-items-center items-center">
					<view class="flex justify-center justify-items-center items-center w-full p-3">
						<view class="iconfont iconfont-process icon-img"></view>入职流程
					</view>
					<view class="split-line-box"></view>
					<view class="flex justify-center justify-items-center items-center w-full p-3">
						<view class="iconfont iconfont-induction icon-img"></view>办理入职
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				background: ['color1', 'color2', 'color3'],
				indicatorColor: '#FFFFFF',
				indicatorActiveColor: '#8A38F5',
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500
			};
		},
		 methods: {
			changeIndicatorDots(e) {
				this.indicatorDots = !this.indicatorDots
			},
			changeAutoplay(e) {
				this.autoplay = !this.autoplay
			},
			intervalChange(e) {
				this.interval = e.target.value
			},
			durationChange(e) {
				this.duration = e.target.value
			}
		}
	}
</script>

<style lang="scss">
.swiper{
	height: 360rpx;
}
.swiper-item{
	width: 100%;
	height: 360rpx;
}
.top-box{
	border-bottom: 2rpx solid #d9d9d9;
}
</style>
